<template>
  <span class="support-ico" :class="iconClass"></span>
</template>
<script>
export default {
  name: "SupportIco",
  props: {
    size: Number,
    type: Number,
  },
  computed: {
    iconClass() {
      const classMap = [
        "decrease",
        "discount",
        "special",
        "invoice",
        "guarantee",
      ];
      return `icon-${this.size} ${classMap[this.type]}`;
    },
  },
};
</script>
<style lang="stylus" scpoed>
@import '~assets/stylus/mixin'
.support-ico
  display inline-block
  background-repeat no-repeat
.icon-1
  width 12px
  height 12px
  background-size 12px 12px
  &.decrease
    bg-image('./icon/decrease_1')
  &.discount
    bg-image('./icon/discount_1')
  &.guarantee
    bg-image('./icon/guarantee_1')
  &.invoice
    bg-image('./icon/invoice_1')
  &.special
    bg-image('./icon/special_1')
.icon-2
  width 16px
  height 16px
  background-size 16px 16px
  &.decrease
    bg-image('./icon/decrease_2')
  &.discount
    bg-image('./icon/discount_2')
  &.guarantee
    bg-image('./icon/guarantee_2')
  &.invoice
    bg-image('./icon/invoice_2')
  &.special
    bg-image('./icon/special_2')
.icon-3
  width 12px
  height 12px
  background-size 12px 12px
  &.decrease
    bg-image('./icon/decrease_3')
  &.discount
    bg-image('./icon/discount_3')
  &.guarantee
    bg-image('./icon/guarantee_3')
  &.invoice
    bg-image('./icon/invoice_3')
  &.special
    bg-image('./icon/special_3')
.icon-4
  width 16px
  height 16px
  background-size 16px 16px
  &.decrease
    bg-image('./icon/decrease_4')
  &.discount
    bg-image('./icon/discount_4')
  &.guarantee
    bg-image('./icon/guarantee_4')
  &.invoice
    bg-image('./icon/invoice_4')
  &.special
    bg-image('./icon/special_4')
</style>